<template>
  <el-container>
    <el-header style="background:#F5F5F5;height:80px">
      <el-row class="toolbox" >
         <el-col class="step" style="width:60%">
           <el-steps :active="active" finish-status="success" align-center >
            <el-step title="答卷人员导入"  @click="peopleSurvey"/>
            <el-step title="问卷发布设置"  @click="Share"/>
            <el-step title="问卷发布" />
          </el-steps>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="mainpagetabel">
      <div  v-if="active == 0">
        <div class="peopletabel">
          <div class="tabelmedium" style="padding:5px;margin-left:100px" ><el-button type="primary" @click="addAnswer">批量添加答题人信息</el-button></div>
          <div style="width:200px"/>
          <!--<div style="padding:10px">调查人员信息导入</div>-->
        </div>
        <div style="padding-top:10px">
          <el-table :data="tableData" border style="width: 80%;margin-left:10%;text-align:center">
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="userid" label="答题人编号" width="100" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="school" label="学校" width="100"/>
            <el-table-column prop="phone" label="手机号码" width="150"/>
            <el-table-column prop="email" label="邮箱" width="150"/>
            <el-table-column prop="operation" label="操作" >
              <template #default="scope"> <!--通过 scope 实现一行数据的传入-->
                  <el-button size="small" >编辑</el-button>
                  <el-popconfirm title="确定要删除嘛？" @confirm="del(scope.row.id)" style="margin-right: 5px"> <!--确认删除按钮-->
                    <template #reference>
                    <el-button
                        size="small"
                        type="danger"
                    >删除</el-button>
                    </template>
                  </el-popconfirm>
              </template>
           </el-table-column>
          </el-table>
        </div>
        <el-row>
        <el-col :span="12"><el-button style="margin-top: 50px;margin-right:10%" type="primary" @click="prior" disabled>上一步</el-button></el-col>
        <el-col :span="12"><el-button style="margin-top: 50px;margin-left:10%" type="primary" @click="next" >下一步</el-button></el-col>
      </el-row>
      </div>
      <div v-if="active == 1">
        <el-form :model="form"  style="padding-top:20px;width:80%;margin-left:80px">
            <el-form-item label="问卷标题" style="padding-top:15px">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="发布时间" style="padding-top:15px">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="开启日期"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date1"
          placeholder="开始时间"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
            <el-form-item label="截止时间" style="padding-top:15px">
                <el-col :span="11">
        <el-date-picker
          v-model="form.date2"
          type="date"
          placeholder="结束日期"
          style="width: 100%"
        />
      </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="结束时间"
          style="width: 100%"
        />
      </el-col>
            </el-form-item>
            <el-form-item label="立刻发布" style="padding-top:15px">
      <el-switch v-model="form.delivery" />
    </el-form-item>
            <el-form-item label="发布方式" style="padding-top:15px">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="微信二维码" name="type" />
        <el-checkbox label="网页链接" name="type" />
      </el-checkbox-group>
    </el-form-item>
            <el-form-item label="备注">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="12"><el-button style="margin-top: 50px;margin-right:10%" type="primary" @click="prior" >上一步</el-button></el-col>
          <el-col :span="12"><el-button style="margin-top: 50px;margin-left:10%" type="primary" @click="next" >下一步</el-button></el-col>
        </el-row>
      </div>
      <div  v-if="active == 2">
        <div style="padding-top:10px">
            <div style="display:flex;height:100px">
              <span style="width:120px;padding-top:20px">答卷链接为</span>
              <el-input v-model="input" placeholder="" style="width:400px;padding-top:20px;text-align: center;height:50px"/>
            </div>
            <div style="display:flex;">
             <span style="width:120px;padding-top:20px">答卷二维码为</span>
             <div class="img"><img src="../assets/5.png" style="width:100px"></div>
            </div>
        </div>
        <el-row>
            <el-col :span="12"><el-button style="margin-top: 50px;margin-right:10%" type="primary" @click="prior" >上一步</el-button></el-col>
            <el-col :span="12"><el-button style="margin-top: 50px;margin-left:10%" type="primary" @click="next" >分享</el-button></el-col>
        </el-row>
      </div>
      <div v-if="active == 3" style="align:center;display:flex;margin-left:40%">
        <meta http-equiv="refresh" content="5; URL=http://localhost:8080/survey/SurveyList">

        <div style="padding-top:12px">
          <el-icon color="#409EFC" class="no-inherit" style="color:green;font-size: 30px;">
            <CircleCheck />
          </el-icon>
          <div style="width:10px"></div>
          <span><h3>问卷发布成功 将于<span>{{initTime}}</span> 秒后返回问卷列表</h3></span>
        </div>
      </div>
    </el-main>
    <!--导入群组信息-->
    <el-dialog
      v-model="dialogVisible"
      title="导入答题人信息"
      width="50%"
      :before-close="handleClose"
    >
       <el-table
        ref="multipleTableRef"
        :data="importtableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
          <el-table-column type="selection" width="55" />
          <el-table-column property="id" label="群组ID" width="120"></el-table-column>
          <el-table-column property="name" label="群组名称" width="120" />
          <el-table-column property="description" label="群组描述" show-overflow-tooltip />
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="importpeople"> 导入 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>

</template>

<script>
import { ref } from 'vue'
import { reactive } from 'vue'
import { ElNotification } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: "ShareSurvey",
  data(){
    return {
      sid:'',
      initTime: 5,
      isPeopleVisible: true,
      isShareVisible: false,
      active: 0,
      isnextAble: false,
      ispriorAble: false,
      tableData: [

      ],
      form:{
        name: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      importtableData:[
        {
          id:31,
          name:"大学生心理健康情况调查群组",
          description:"主要用于调查大学生心理健康情况",
        },{
          id:32,
          name:"大学生喜爱活动调查群组修改",
          description:"主要调查大学生喜爱的活动",
        },{
          id:35,
          name:"对双十一女生购物情况调查群组",
          description:"对双十一女生购物情况调查群组",
        },{
          id:37,
          name:"演示专用群组....",
          description:"演示专用群组....",
        }
      ],
      grouptotal:'',
      dialogVisible:false,
      input:"",
    }

  },
  methods:{
    peopleSurvey(){
      this.isPeopleVisible=true;
      this.isShareVisible=false;
    },
    Share(){
      this.isPeopleVisible=false;
      this.isShareVisible=true;
    },
    next(){
        console.log("test")
        this.$axios.get("/survey-base/update?id=" + this.sid).then(res=>res.data).then(res=>{
            if(res.code == 200){
                console.log('提交成功');
            }
        })
      if (this.active > 2) {
        this.active = 2;
      }else if(this.active == 2){
        ElMessageBox.confirm(
            '确认发布问卷吗?',
            '提示',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
            }
        )
            .then(() => {
                this.$axios.get("/survey-base/update?id=" + this.sid).then(res=>res.data).then(res=>{
                    if(res.code == 200){
                        console.log('提交成功');
                    }
                })
              this.active++;
              ElMessage({
                type: 'success',
                message: '分享成功',
              })
            })
            .catch(() => {
              this.active--;
              ElMessage({
                type: 'info',
                message: '取消分享',
              })
            })

      } else {
        this.active++;
      }
    },
    prior(){
      if(this.active <= 0) {
        this.active = 0 ;
      } else {
        this.active--;
      }
    },
    onSubmit(){
      console.log('提交成功');
    },
    addAnswer(){
      // this.loadPost();
      this.dialogVisible = true;
    },
    importpeople(){
      this.dialogVisible = false;
      this.tableData = [
        {
          id: '1',
          userid: '1',
          name: '罗嘉怡',
          school: '东北大学',
          phone: '18741026908',
          email: '1092166273@qq.com',
        },{
          id: '2',
          userid: '2',
          name: '刘婉晴',
          school: '东北大学',
          phone: '18741026934',
          email: '30166232@qq.com',
        },{
          id: '3',
          userid: '3',
          name: '岳茗',
          school: '东北大学',
          phone: '15381026934',
          email: '50216632@qq.com',
        }
      ]
    },
    loadPost(){ // 得到表格中数据
      this.$axios.post("/group/listGroup").then(res=>res.data).then(res=>{
        if(res.code == 200){
          console.log(res.data)
          this.importtableData = res.data.records;
        } else{
          alert('获取数据失败')
        }
      })

    },
  },
  mounted(){
    console.log(this.$route.query.sid);
    this.sid = this.$route.query.sid;
    this.input = "https://localhost:8080/survey/"+this.sid+".html",
    console.log(this.sid);
  },
  created() {
    setInterval(this.leftTime, 800)
  },
  leftTime() {
    this.initTime--;
  }
}

</script>

<style scoped>


.mainpagetabel{
  background:#FFFFFF;
  margin-left:5%;
  width: 90%;
  margin-top:15px;
  min-height:500px;
}
.peopletabel{
  display:flex;
  height:50px;
  padding-top:20px;
}
.sharemethod{
  height:80px;
  display:flex;
}
.step{
  width:50%;
}
.toolbox{
  width:80%;
  height:80px;
  padding-top:10px;
  margin-left:10%;
}
</style>